<template>
  <div class="box">
    <div>
      <p class="ptitle">环境质量</p>
      <div class="item1 flex item1box">
        <div style="width: 48%">
          <INSTRUMENT :data="PMDATA" v-if="PMDATA.length" />
        </div>
        <div style="width: 48%">
          <INSTRUMENT :data="WATERDATA" v-if="WATERDATA.length" />
        </div>
      </div>
      <div style="height: 8%">
        <div class="textPmClass">
          <span>PM</span>
          <sub>2.5</sub>年度目标：
          <span class="yearValue">{{ YEAROBJECT.yearValue }}</span
          >ug/m <sup>3</sup>,截止
          <span class="dataTime">{{ YEAROBJECT.dataTime }}</span
          >为： <span class="nowValue">{{ YEAROBJECT.value }}</span
          >ug/m
          <sup>3</sup>
        </div>
      </div>
      <div class="item1 flex">
        <div class="p48">
          <div class="flex flex_wrap">
            <PMBOX
              v-if="getPmdata"
              :text="'<span>PM</span><sub>2.5</sub>'"
              :num="getPmdata['pm25']"
              :type="'ug/m<sup>3</sup>'"
            />
            <PMBOX
              v-if="getPmdata"
              :text="'<span>PM</span><sub>10</sub>'"
              :num="getPmdata['pm10']"
              :type="'ug/m<sup>3</sup>'"
            />
            <PMBOX
              v-if="getPmdata"
              :text="'<span>SO</span><sub>2</sub>'"
              :num="getPmdata['so2']"
              :type="'ug/m<sup>3</sup>'"
            />
            <PMBOX
              v-if="getPmdata"
              :text="'<span>NO</span><sub>X</sub>'"
              :num="getPmdata['nox']"
              :type="'ug/m<sup>3</sup>'"
            />
            <PMBOX
              v-if="getPmdata"
              :text="'<span>CO</span>'"
              :num="getPmdata['co']"
              :type="'ug/m<sup>3</sup>'"
            />
            <PMBOX
              v-if="getPmdata"
              :text="'<span>O</span><sub>3</sub>'"
              :num="getPmdata['o3']"
              :type="'ug/m<sup>3</sup>'"
            />
          </div>
        </div>
        <div class="p48">
          <div class="flex flex_wrap" v-if="getWaterData">
            <PMBOX
              :text="'<span>PH</span>'"
              :num="Number(getWaterData[3].value).toFixed(2)"
              :type="getWaterData[3].itemUnit"
            />
            <PMBOX
              :text="'<span>' + getWaterData[1].name + '</span>'"
              :num="Number(getWaterData[1].value).toFixed(2)"
              :type="getWaterData[1].itemUnit"
            />
            <PMBOX
              :text="'<span>' + getWaterData[2].name + '</span>'"
              :num="Number(getWaterData[2].value).toFixed(2)"
              :type="getWaterData[2].itemUnit"
            />
            <PMBOX
              :text="'<span>' + getWaterData[4].name + '</span>'"
              :num="Number(getWaterData[3].value).toFixed(2)"
              :type="getWaterData[4].itemUnit"
            />
            <PMBOX
              :text="'<span>COD</span><sub>mn</sub>'"
              :num="Number(getWaterData[0].value).toFixed(2)"
              :type="getWaterData[0].itemUnit"
            />
          </div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div>
      <div class="flex flex-item">
        <div>
          <p class="ptitle">
            {{ this.type == 1 ? "园区废气排放趋势" : "园区废水排放趋势" }}
          </p>
        </div>
        <div class="flex flex_center">
          <div
            class="online"
            :class="this.type == 1 ? 'lactive' : ''"
            @click="getQueryairmonthcount(1)"
          >
            废气趋势
          </div>
          <div
            class="online"
            :class="this.type == 2 ? 'lactive' : ''"
            @click="getQueryairmonthcount(2)"
          >
            废水趋势
          </div>
        </div>
      </div>
      <div class="waterzx">
        <WATERZX :list="waterList" v-if="waterList.length" />
      </div>
    </div>
    <el-divider></el-divider>
    <div>
      <p class="ptitle">河流水质实时数据</p>
      <div style="overflow: hidden">
        <SCROLL
          :topData="pData"
          @loadingMore="loadingMore"
          :list="plist"
          style="height: 15vh"
        />
      </div>
    </div>
    <el-divider></el-divider>
    <div>
      <p class="ptitle">危险废物动态流转</p>
      <DANGERZX class="dangezx" :title="' '" :list="zzlist" />
    </div>
  </div>
</template>
<script>
import PMBOX from "components/pmbox";
import SCROLL from "components/Scroll";
import DANGERZX from "components/echarts/Dangerzx";
import WATERZX from "components/echarts/Waterzx";
import {
  inandoutbybayonetbar,
  getCode,
  getfindareahourcurrent,
  getquerywatersource,
  getqueryyeargoal,
  getqueryairmonthcount,
  getfindswdatalist,
  getquerynewdangertrash,
} from "api/zyy";
import Bus from "@/utils/bus";
import { userinandoutbyhour } from "api/zdh";
import INSTRUMENT from "components/echarts/Instrument";
export default {
  name: "alarmControl",
  components: { INSTRUMENT, PMBOX, SCROLL, DANGERZX, WATERZX },
  data() {
    return {
      online: 1,
      pieData: {},
      pieData1: {},
      tabPosition: "online",

      pData: [
        {
          name: "检测水域",
          deindex: "riverName",
        },
        {
          name: "断面名称",
          deindex: "stationName",
        },
        {
          name: "COD<sub>mn</sub>",

          callBack: function (item) {
            const { items } = item;
            var value = 0;
            items.map((it, i) => {
              if (it.itemName === "高锰酸盐指数") {
                value = it.value;
                return;
              }
            });
            return value;
          },
        },
        {
          name: "氨氮",
          callBack: function (item) {
            const { items } = item;
            var value = 0;
            items.map((it, i) => {
              if (it.itemName === "氨氮") {
                value = it.value;
                return;
              }
            });
            return value;
          },
        },
        {
          name: "总磷",
          callBack: function (item) {
            const { items } = item;
            var value = 0;
            items.map((it, i) => {
              if (it.itemName === "总磷") {
                value = it.value;
                return;
              }
            });
            return value;
          },
        },
        {
          name: "总氮",
          callBack: function (item) {
            const { items } = item;
            var value = 0;
            items.map((it, i) => {
              if (it.itemName === "总氮") {
                value = it.value;
                return;
              }
            });
            return value;
          },
        },
      ],
      plist: [],
      zzlist: [],
      page: 1,
      page1: 1,
      pageuav: 1,
      pageuav1: 1,
      comzxlist: [],
      planeData: {},
      pDataList: [],
      wctive: 0,
      code: "",
      airLevelMap: {
        Ⅰ: {
          airLevelName: "优",
          airLevelColor: "#32f43c",
        },
        Ⅱ: {
          airLevelName: "良",
          airLevelColor: "#e3f928",
        },
        Ⅲ: {
          airLevelName: "轻",
          airLevelColor: "#e89c3a",
        },
        Ⅳ: {
          airLevelName: "中",
          airLevelColor: "#ff0b0b",
        },
        Ⅴ: {
          airLevelName: "重",
          airLevelColor: "#98044e",
        },
        Ⅵ: {
          airLevelName: "严",
          airLevelColor: "#7d0022",
        },
      },
      waterLevelMap: {
        I: {
          waterLevelName: "I类",
          waterLevelColor: "#0394df",
          waterValue: 50,
        },
        II: {
          waterLevelName: "II类",
          waterLevelColor: "#0483c5",
          waterValue: 100,
        },
        III: {
          waterLevelName: "III类",
          waterLevelColor: "#009544",
          waterValue: 150,
        },
        IV: {
          waterLevelName: "IV类",
          waterLevelColor: "#f3d634",
          waterValue: 200,
        },
        V: {
          waterLevelName: "V类",
          waterLevelColor: "#fda033",
          waterValue: 250,
        },
        劣V: {
          waterLevelName: "劣V类",
          waterLevelColor: "#ff6666",
          waterValue: 300,
        },
      },
      PMDATA: [],
      WATERDATA: [],
      YEAROBJECT: {},
      type: 1,
      waterList: [],
    };
  },
  computed: {
    getWaterData() {
      if (this.WATERDATA.length) {
        const {
          data: { items },
        } = this.WATERDATA[0];

        return items;
      }
    },
    getPmdata() {
      if (this.PMDATA.length) {
        return this.PMDATA[0];
      }
    },
  },
  mounted() {
    this.initCode();
  },
  watch: {},
  methods: {
    async initCode() {
      let res = await getCode({
        username: "thirdparty",
        password: "123456",
      });

      if (this.$iscode(res)) {
        const { data } = res;
        this.code = data;
        this.getFindareahourcurrent();
        this.getQuerywatersource();
        this.getQueryyeargoal();
        this.getQueryairmonthcount(1);
        this.getFindswdatalist();
        this.getQuerynewdangertrash();
      } else {
        this.$message.error(res.errmsg);
      }
    },
    async getFindareahourcurrent() {
      this.PMDATA = [];
      let res = await getfindareahourcurrent({
        key: this.code,
      });
      if (this.$iscode(res)) {
        const {
          data: { data },
        } = res;

        this.PMDATA.push(data);
        let temp = this.airLevelMap[data.airLevel];
        if (temp) {
          this.PMDATA[0].airLevelName = temp.airLevelName;
          this.PMDATA[0].airLevelColor = temp.airLevelColor;
          this.PMDATA[0].name = "首要污染物";
          this.PMDATA[0].title = "空气质量指标";
          (this.PMDATA[0].bgColor = "#2463a8"),
            (this.PMDATA[0].bgColor2 = "#2463a8"),
            (this.PMDATA[0].primaryPollutant = data.primaryPollutant);
          this.PMDATA[0].aqi = data.aqi;
          this.PMDATA[0].none = true;
        }
      }
    },
    async getQuerywatersource() {
      this.WATERDATA = [];
      let res = await getquerywatersource({
        key: this.code,
      });
      if (this.$iscode(res)) {
        const { data, items } = res;
        this.WATERDATA.push(res);
        let temp = this.waterLevelMap[data.nowLevel];
        if (temp) {
          this.WATERDATA[0].airLevelName = temp.waterLevelName;
          this.WATERDATA[0].airLevelColor = temp.waterLevelColor;
          this.WATERDATA[0].name = "当前水质";
          this.WATERDATA[0].title = "善后河水源地";
          (this.WATERDATA[0].bgColor = "#2463a8"),
            (this.WATERDATA[0].bgColor2 = "#2463a8"),
            (this.WATERDATA[0].primaryPollutant = "");
          this.WATERDATA[0].aqi = temp.waterValue;
          this.WATERDATA[0].none = false;
        }
      }
    },
    async getQueryyeargoal() {
      this.YEAROBJECT = {};
      let res = await getqueryyeargoal({
        key: this.code,
      });
      if (this.$iscode(res)) {
        const { data } = res;
        this.YEAROBJECT = data;
      }
    },
    async getQueryairmonthcount(n) {
      this.type = n;
      this.waterList = [];
      let res = await getqueryairmonthcount({
        type: this.type,
        key: this.code,
      });
      if (this.$iscode(res)) {
        const { data } = res;
        this.type == 1
          ? (data.title = "园区废气排放趋势")
          : (data.title = "园区废水排放趋势");
        if (this.type == 1) {
          data.data = ["NOx", "SO2", "颗粒物", "非甲烷总烃"];
        } else {
          data.data = ["化学需氧量", "氨氮", "总磷", "总氮"];
          data.nox = data.oxygen;
          data.so2 = data.an;
          data.pm = data.tp;
          data.nonMethane = data.tn;
        }
        this.waterList.push(data);
      }
    },
    async getFindswdatalist() {
      let res = await getfindswdatalist({
        key: this.code,
      });
      if (this.$iscode(res)) {
        const { data } = res;
        this.plist = data;
      }
    },

    async getQuerynewdangertrash() {
      let res = await getquerynewdangertrash({
        key: this.code,
      });
      if (this.$iscode(res)) {
        const { data } = res;

        var n = {
          legend_data: ["产生", "转入", "转出"],
          series: [
            {
              data: [],
              name: "产生",
            },
            {
              data: [],
              name: "转入",
            },
            {
              data: [],
              name: "转出",
            },
          ],
          xAxis_data: [],
        };
        try {
          data.length &&
            data.map((item, i) => {
              n.series[0].data.push(item[1]);
              n.series[1].data.push(item[2]);
              n.series[2].data.push(item[3]);
              n.xAxis_data.push(item[0]);
            });
        } catch (e) {}

        this.zzlist.push(n);
      }
    },
    loadingMore() {
      this.page += 1;
      this.getCamerastatslist();
    },
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
.flex_center {
  justify-items: center;
}
.flex-item {
  align-items: center;
}
.box {
  position: relative;
  height: 100%;
  margin-top: 0.6vh;
}
.textPmClass {
  font-size: 16px;
  color: #f4f897;
}
.flex_wrap {
  flex-wrap: wrap;
}
.ptitle {
  font-size: 23px;
}

.lactive {
  background-color: #206ebf !important;
}
.online {
  font-size: 0.45vw;
  padding: 4px 4px;
  border: 1px solid #206ebf;
}
.item1box {
  height: 14vh;
}
.p48 {
  width: 48%;
}
.waterzx {
  height: 16vh;
  min-height: 18vh;
}
.dangezx {
  margin-top: 1vh;
  height: 16vh;
}
</style>
